<template>
	<view>
		<view class="header">
			<view class="one">
				<view class="one_one">连续签到</view>
				<view class="yellow">{{res.lianxu}}天</view>
			</view>
			<view class="two">
				<view class="avatar">
					<image :src="res.avatar" mode="" style="width: 120upx;height: 120upx;"></image>
				</view>
				<view class="white">
					{{res.nickname}}
				</view>
				<view class="white">
					我的余额:{{res.myjindou}}余额
				</view>
				<view class="status white" @click="signin">{{sign}}</view>
			</view>
			<view class="one" style="position: relative;">
				<view @click="jump" data-src="./jindou" style="position: absolute;right: 30upx;top: 20upx;width: 200upx;background-color: #eee;border-radius: 30upx;opacity: 0.5;color: #444;">
					详细记录
				</view>
				<view class="one_one">总签到</view>
				<view class="yellow">{{res.total}}天</view>
			</view>
		</view>
		<!-- 日历年月选项 -->
		<!-- <view style="height: 50upx; background-color: #FFFFFF;margin-top: 20upx;position: relative;" @click="select">
			<image src="../../../static/rili.png" mode="" style="width: 40upx;height: 40upx;vertical-align: middle;padding-left: 20upx;"></image>
			<scroll-view scroll-y="true" style="width: 300upx;height: 300upx;" :style="{display:showorhide}" class="scroll">
			<view v-for="(arr,index) in arrs" :key=index @click.stop="bank_miss(index)" v-cloak>{{arr}}</view>
			</scroll-view>
			<text style="color:#24B2F4; font-size: 35upx;vertical-align: middle;padding-left: 20upx;">{{my_year}}年{{my_month}}月</text>
		</view> -->
		
		<view style="height: 90upx; background-color: #FFFFFF;position: relative;overflow: hidden;" @tap="toggleTab()">
			<!-- <image src="../../../static/biankaung.png" mode="" style="z-index: 0;width: 100%;position: absolute;height: 280upx;"></image> -->
			<image src="../../../static/rili.png" mode="" style="width: 40upx;height: 40upx;vertical-align: middle;padding-left: 250upx;position: absolute;padding-top: 34upx;"></image>
			<view style="color:#ffffff; font-size: 35upx;vertical-align: middle;padding-left: 300upx;z-index: 99999;position: absolute;padding-top: 26upx;">{{my_year}}年{{my_month}}月</view>
		</view>
		<yu-datetime-picker @confirm="onConfirm" startYear="2016" ref="dateTime" value="2016-11-10 08:30:01" :isAll="true" :current="false"></yu-datetime-picker>
		
		<!-- 日(分成5排,一排7个) -->
		<view class="week" style="margin-top: 20upx;position: relative;">
			<view  v-for="(res,index) in data[0]" :key="index" style="display: inline-block; width: 14.2%;position: relative;" class="day">
				<text style="padding-left:20upx">{{res.day}}</text>
				<view v-if="res.signold==1" style="position: absolute;width: 100%;height: 100%;border: 1upx solid #b71c24;top: 0;left: 0;box-sizing: border-box;opacity: 0.1;"></view>
				<image src="../../../static/zhengque.png" mode="" style="width: 60upx;height: 60upx;margin-top: 20upx;position: absolute;right: 0;" v-if="res.signed!=0"></image>
			</view>
		</view>
		<view class="week">
			<view  v-for="(res,index) in data[1]" :key="index" style="display: inline-block; width: 14.2%;position: relative;" class="day">
			<text style="padding-left:20upx">{{res.day}}</text>
			<view v-if="res.signold==1" style="position: absolute;width: 100%;height: 100%;border: 1upx solid #b71c24;top: 0;left: 0;box-sizing: border-box;opacity: 0.1"></view>
			<image src="../../../static/zhengque.png" mode="" style="width: 60upx;height: 60upx;margin-top: 20upx;position: absolute;right: 0;" v-if="res.signed!=0"></image>
			</view>
		</view>
		<view class="week">
			<view  v-for="(res,index) in data[2]" :key="index" style="display: inline-block; width: 14.2%;position: relative;" class="day">
			<text style="padding-left:20upx">{{res.day}}</text>
			<view v-if="res.signold==1" style="position: absolute;width: 100%;height: 100%;border: 1upx solid #b71c24;top: 0;left: 0;box-sizing: border-box;opacity: 0.1"></view>
			<image src="../../../static/zhengque.png" mode="" style="width: 60upx;height: 60upx;margin-top: 20upx;position: absolute;right: 0;" v-if="res.signed!=0"></image>
			</view>
		</view>
		<view class="week">
			<view  v-for="(res,index) in data[3]" :key="index" style="display: inline-block; width: 14.2%;position: relative;" class="day">
			<text style="padding-left:20upx">{{res.day}}</text>
			<view v-if="res.signold==1" style="position: absolute;width: 100%;height: 100%;border: 1upx solid #b71c24;top: 0;left: 0;box-sizing: border-box;opacity: 0.1"></view>
			<image src="../../../static/zhengque.png" mode="" style="width: 60upx;height: 60upx;margin-top: 20upx;position: absolute;right: 0;" v-if="res.signed!=0"></image>
			</view>
		</view>
		<view class="week">
			<view  v-for="(res,index) in data[4]" :key="index" style="display: inline-block; width: 14.2%;position: relative;" class="day" v-if="res.day!=0">
			<text style="padding-left:20upx">{{res.day}}</text>
			<view v-if="res.signold==1" style="position: absolute;width: 100%;height: 100%;border: 1upx solid #b71c24;top: 0;left: 0;box-sizing: border-box;opacity: 0.1"></view>
			<image src="../../../static/zhengque.png" mode="" style="width: 60upx;height: 60upx;margin-top: 20upx;position: absolute;right: 0;" v-if="res.signed!=0"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
	export default {
		components: {
			yuDatetimePicker
		},
		data() {
			return {
				res:[],
				openid:'',
				sign:'点击签到',
				disabled:'disabled',
				signed:'',
				data:[],
				my_year:'',
				my_month:'',
				showorhide:'none',
				// arrs:['2020年01月','2020年02月','2020年03月','2020年04月','2020年05月','2020年06月','2020年07月','2020年08月','2020年09月','2020年10月','2020年11月','2020年12月','2021年01月','2021年02月','2021年03月','2021年04月','2021年05月','2021年06月','2021年07月'],
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.hideLoading()
				uni.request({
					url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=sign&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.res = res.data
						this.signed = res.data.signed
						this.my_year = res.data.my_year
						this.my_month = res.data.my_month
						// 日期接口
						uni.request({
							url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=sign.getCalendar&app=1&date='+res.data.my_year+'-'+res.data.my_month,
							method: 'POST',
							data: {'openid':this.openid},
							header:{'Content-Type':'application/x-www-form-urlencoded'},
							success: res => {
								this.data = res.data.calendar
								console.log(this.data)
								uni.hideLoading()
							},
							fail: () => {},
							complete: () => {}
						});
					},
					fail: () => {},
					complete: () => {}
				});
			},
			select() {
				this.showorhide = 'block'
			},
			// bank_miss(index) {
			// 	this.my_year = this.arrs[index].substring(0,4)
			// 	this.my_month = this.arrs[index].substring(5,7)
			// 	this.showorhide = 'none'
				// // 日期接口
				// uni.request({
				// 	url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=sign.getCalendar&app=1&date='+this.my_year+'-'+this.my_month,
				// 	method: 'POST',
				// 	data: {'openid':this.openid},
				// 	header:{'Content-Type':'application/x-www-form-urlencoded'},
				// 	success: res => {
				// 		this.data = res.data.calendar
				// 		console.log(this.data)
				// 		uni.hideLoading()
				// 	},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
			// },
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			signin(){
				this.signed = 1
				this.sign = '今日已签'
				uni.request({
					url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=sign.dosign&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.showModal({
							content: res.data.result.message,
							confirmText: "确定",
							cancelText: "取消",
							success: res => {},
						})
						this.setAjax()
						uni.hideLoading()
						console.log(res)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toggleTab(item, index) {
				this.$refs.dateTime.show();
			},
			onConfirm(val) {
				this.my_year = val.selectArr[0]
				this.my_month = val.selectArr[1]
				// 日期接口
				uni.request({
					url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=sign.getCalendar&app=1&date='+this.my_year+'-'+this.my_month,
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.data = res.data.calendar
						console.log(this.data)
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.header {
		text-align: center;
		display: flex;
		height: 400upx;
		background-color: #7C2548;
	}
	.one {
		flex: 1;
	}
	.one_one {
		margin-top: 150upx;
		color: #FFFFFF;
	}
	.two {
		flex: 1.5;
	}
	.avatar image {
		margin-top: 50upx;
		border-radius: 100upx;
		background-color: #fff;
	}
	.white {
		color: #fff;
	}
	.yellow {
		color: yellow;
	}
	.details {
		position: absolute;
		top: 20upx;
		right: 10upx;
		color: #ccc;
	}
	.status {
		font-size: 32upx;
		padding: 5upx 8upx;
		width: 150upx;
		display: inline-block;
		border: 1px solid #fff;
		border-radius: 50upx;
	}
	.day {
		height: 100upx;
		color: #888;
	}
	.week {
		position: relative;
		background-color: #FFFFFF;
	}
	.scroll {
		position: absolute;
		z-index: 99;
		top: 60upx;
		left: 60upx;
		background-color: #eee;
		border: 2upx;
	}
</style>
